<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>文章标题</title>

        <!-- bootstrap styles -->
        <link th:href="@{css/bootstrap.css}" th:rel="stylesheet" media="all" />
        <!-- font-awesome styles -->
        <link th:href="@{css/font-awesome.css}" th:rel="stylesheet" />
        <!-- google styles -->
        <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
        <!-- monokai sublime style -->
        <link th:href="@{css/monokai.css}" th:rel="stylesheet"/>
        <link th:href="@{css/common.css}" th:rel="stylesheet"/>
        <link th:href="@{css/articles.css}" th:rel="stylesheet"/>

        <script th:src="@{js/jquery.min.js}"></script>
        <script th:src="@{js/bootstrap-3.1.1.min.js}"></script>
        <!-- jQuery Easing -->
        <script th:src="@{js/jquery.easing.1.3.js}"></script>
        <!-- Waypoints -->
        <script th:src="@{js/jquery.waypoints.min.js}"></script>
        <!-- Stellar Parallax -->
        <script th:src="@{js/jquery.stellar.min.js}"></script>
        <!-- highlight -->
        <script th:src="@{js/highlight.pack.js}"></script>
        <script th:src="@{js/articles.js}"></script>
    </head>
    <body class="articles">
        <div class="loader"></div>
        <div id="page">
            <div id="header" data-stellar-background-ratio="0.5" class="header">
                <nav role="navigation">
                    <ul>
                        <li><a th:href="index"><i class="fa fa-home"></i></a></li>
                        <li th:if="${session.uid == session.article.uid}"><a th:href="@{modify_article(aid=${session.article.aid})}"><i class="fa fa-edit"></i></a></li>
                     </ul>
                </nav>
                <div class="page-title">
                    <h2 th:text="${session.article.name}"></h2>
                </div>
            </div>
            <div id="main">
                <div class="wrapper">
                    <div id="article" class="article padding">
                        <script th:inline="javascript">
                            var content = [[${session.article.content}]];
                            $("#article").html(content);
                        </script>
                        <hr/>
                        <form th:if="${session.username}" th:action="@{create_article_comment(aid=${session.article.aid})}" method="post">
                            <div class="row">
                                <span>发表你的看法：</span><input type="submit" class="btn btn-success release" value="发表评论"/>
                            </div>
                            <div class="row">
                                <textarea name="comment"></textarea>
                            </div>
                            <hr/>
                        </form>
                        <div class="comments" th:each="comment:${session.comments}">
                            <div class="row">
                                <span>[[${comment.username}]]</span><span th:text="${#dates.format(comment.createdTime,'yyyy年MM月dd日 HH:mm')}" style="font-size: 12px;"></span>
                            </div>
                            <div style="text-indent: 1em;">
                                [[${comment.content}]]
                            </div>
                            <hr/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div th:if="${session.previous}" class="goto previous js-top">
            <script th:inline="javascript">
                document.onkeydown = previous;
                function previous() {
                    if (event.keyCode === 37){
                        location = 'get_article?aid=[[${session.previous.aid}]]';
                    }
                }
            </script>
            <a th:href="@{get_article(aid=${session.previous.aid})}" th:title="${session.previous.name}"><i class="fa fa-arrow-left fa-2x"></i></a>
        </div>

        <div th:if="${session.next}" class="goto next js-top">
            <script th:inline="javascript">
                document.onkeydown = next;
                function next() {
                    if (event.keyCode === 39){
                        location = 'get_article?aid=[[${session.next.aid}]]';
                    }
                }
            </script>
            <a th:href="@{get_article(aid=${session.next.aid})}" th:title="${session.next.name}"><i class="fa fa-arrow-right fa-2x"></i></a>
        </div>

        <div class="goto top js-top">
            <a href="#" class="js-gotop"><i class="fa fa-arrow-up fa-2x"></i></a>
        </div>
    </body>
</html>

